<template>
  <div class="page flex-col">
    <div class="section1 flex-col">
      <div class="outer1 flex-col">
        <div class="box1 flex-row">
          <div class="box2">
            <!-- <span class="word1">欢迎来到</span>
            <span class="info1">华瑞e家</span> -->
            <img class="word1" src="../../assets/imgs/ddsindex/welcome.png">
          </div>
          <div class="box3 flex-col">
            <div class="group1 flex-row">
              <img
                class="label1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/ddsindex/search.png"
              />
              <span class="word2">搜索</span>
            </div>
          </div>
          <img
            class="pic1"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/robot.png"
          />
          <img
            class="img1"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/message.png"
          />
        </div>
        <div class="box4 flex-row">
          <img
            class="pic2"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng19408e5dd48512027bb44341e584bf18a8d904a99882c32c6183225952b62270"
          />
        </div>
        <div class="box5 flex-col"><span class="word3">5</span></div>
      </div>
      <div class="outer2 flex-row">
        <div
          class="main1-0 flex-col"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <div class="outer3-0 flex-col">
            <img
              class="img2-0"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage0"
            />
            <span class="word4-0" v-html="item.lanhutext0"></span>
          </div>
        </div>
      </div>
      <div class="outer4 flex-col">
        <div class="group2 flex-row">
          <span class="word5">精选功能</span>
          <span class="word6">/&nbsp;这里是一句副文案</span>
        </div>
      </div>
      <div class="outer5 flex-col">
        <div class="mod1 flex-row">
          <div class="outer6 flex-col">
            <span class="info2">小黑板</span>
            <div class="bd1 flex-row">
              <span class="info3">全部</span>
              <img
                class="icon1"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf6ffd6d283d8d1e2b5c688c9032d175ca9bc710dcc487803e29b942467fa324f"
              />
            </div>
          </div>
          <div class="outer7 flex-col"></div>
          <div class="outer8 flex-col">
            <span class="txt1">这里是标题最最多十二个字</span>
            <span class="word7">2021年03月20日发布</span>
          </div>
        </div>
      </div>
      <div class="outer9 flex-row">
        <span class="info4">推荐产品</span>
        <span class="info5">全部</span>
        <img
          class="label2"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/ddsindex/enter.png"
        />
      </div>
      <span class="info6">华瑞畅销产品，用户的选择！</span>
      <img
        class="img3"
        referrerpolicy="no-referrer"
        src="../../assets/imgs/ddsindex/tuijianchanping1.png"
      />
      <div class="outer10 flex-row">
        <img
          class="pic3"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/ddsindex/tuijianchanping2.png"
        />
        <img
          class="img4"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/ddsindex/tuijianchanping3.png"
        />
      </div>
      <div class="outer11 flex-col">
        <div class="wrap1 flex-row">
          <span class="word8">互联网产品</span>
          <span class="word9">全部</span>
          <img
            class="label3"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/enter.png"
          />
        </div>
      </div>
      <div class="outer12 flex-col">
        <div class="box6 flex-row">
          <img
            class="pic4"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/product1.png"
          />
          <div class="bd2 flex-col">
            <div class="box7 flex-col">
              <span class="word10">平安e生保长期医疗</span>
            </div>
            <div class="box8 flex-col">
              <div class="layer1 flex-row">
                <span class="word11">120种特定疾病保障翻倍</span>
                <div class="box9 flex-col"></div>
                <span class="word12">800万总额度保障</span>
              </div>
            </div>
            <div class="box10 flex-col">
              <div class="box11 flex-row">
                <div class="layer2 flex-col">
                  <span class="word13">在线投保</span>
                </div>
                <div class="layer3 flex-col">
                  <span class="word14">互联网</span>
                </div>
                <div class="layer4 flex-col">
                  <span class="info7">儿童专属</span>
                </div>
              </div>
            </div>
            <div class="box12 flex-col"><span class="info8">元起</span></div>
          </div>
        </div>
        <div class="box13 flex-row"><div class="section2 flex-col"></div></div>
        <div class="box14 flex-col"><span class="txt2">限时活动</span></div>
        <span class="txt3">160</span>
      </div>
      <div class="outer13 flex-col">
        <div class="box15 flex-row">
          <div class="bd3 flex-col"></div>
          <div class="bd4 flex-col">
            <div class="mod2 flex-col">
              <span class="word15">众惠惠享e生百万医疗</span>
            </div>
            <div class="mod3 flex-col">
              <div class="outer14 flex-row">
                <span class="txt4">百万药神福利免费送</span>
                <div class="main2 flex-col"></div>
                <span class="txt5">赠送多项增值服务</span>
              </div>
            </div>
            <div class="mod4 flex-col">
              <div class="wrap2 flex-col">
                <span class="txt6">在线投保</span>
              </div>
            </div>
            <div class="mod5 flex-col"><span class="word16">元起</span></div>
          </div>
        </div>
        <div class="box16 flex-row"><div class="box17 flex-col"></div></div>
        <span class="word17">115</span>
      </div>
      <div class="outer15 flex-col">
        <div class="section3 flex-row">
          <div class="group3 flex-col"></div>
          <div class="group4 flex-col">
            <div class="section4 flex-col"></div>
            <div class="section5 flex-col">
              <span class="word18">儿童综合保险</span>
            </div>
            <div class="section6 flex-col">
              <div class="group5 flex-col">
                <span class="word19">互联网</span>
              </div>
            </div>
            <div class="section7 flex-col">
              <span class="word20">元起</span>
            </div>
          </div>
        </div>
        <span class="info9">安联财险乐享人生少儿版</span>
        <span class="word21">290</span>
      </div>
      <div class="outer16 flex-row">
        <img
          class="icon2"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/ddsindex/loading.png"
        />
        <span class="info10">正在加载更多的数据…</span>
      </div>
      <img
        class="img5"
        referrerpolicy="no-referrer"
        src="../../assets/imgs/ddsindex/huarui.png"
      />
      <div class="outer17 flex-col">
        <div class="block1 flex-row">
          <img
            class="icon3"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/home.png"
          />
          <img
            class="label4"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/product.png"
          />
          <img
            class="icon4"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/study.png"
          />
          <img
            class="icon5"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/mine.png"
          />
        </div>
        <div class="block2 flex-row">
          <span class="info11">首页</span>
          <span class="txt7">产品</span>
          <span class="word22">e学堂</span>
          <span class="word23">我的</span>
        </div>
      </div>
    </div>
    <div class="section8 flex-col">
      <div class="mod6 flex-col">
        <div>
          <img class='outer18' src="../../assets/imgs/ddsindex/kehudongtai.png">
        </div>
        <span class="word25">立即制作计划书，邀请客户体验</span>
      </div>
      <img class="mybg" src="../../assets/imgs/ddsindex/bg1.png">
    </div>
    <div class="section9 flex-col">
      <div class="layer5 flex-col">
        <span class="info12">获客专区</span>
        <div class="group6 flex-row">
          <div class="mod7 flex-col">
            <span class="word26">深入多种场景</span>
            <button class="box18 flex-col" @click="onClick_1">
              <span class="txt9">去查看</span>
            </button>
          </div>
          <img
            class="img6"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/ddsindex/huokezhuanqu.png"
          />
        </div>
      </div>
    </div>
    <div class="section10 flex-col"></div>
    <div class="section11 flex-col">
      <div class="bd5 flex-row">
        <div class="group7 flex-col">
          <span class="info13">让增员更简单</span>
          <button class="main3 flex-col" @click="onClick_2">
            <span class="word27">去查看</span>
          </button>
        </div>
        <img
          class="pic5"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/ddsindex/zengyuan.png"
        />
      </div>
      <span class="info14">增员专区</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuimage0: require('../../assets/imgs/ddsindex/jihuashu.png'),
            
          lanhutext0: '计划书'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/ruiguanjia.png'),
            
          lanhutext0: '瑞管家'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/myorder.png'),
            
          lanhutext0: '我的订单'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/weidian.png'),
            
          lanhutext0: '微店'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/lipeizhushou.png'),
            
          lanhutext0: '理赔助手'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/familyjihuashu.png'),
            
          lanhutext0: '家庭计划书'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/sameproduct.png'),
            
          lanhutext0: '同业产品'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/hotproduct.png'),
            
          lanhutext0: '热销产品…'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/jigouguanli.png'),
            
          lanhutext0: '机构管理'
        },
        {
          lanhuimage0:require('../../assets/imgs/ddsindex/more.png'),
            
          lanhutext0: '全部'
        }
      ],
      constants: {}
    };
  },
  methods: {
    onClick_1() {
      alert(1);
    },
    onClick_2() {
      alert(1);
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 3658px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  .section1 {
    z-index: auto;
    width: 750px;
    height: 3658px;
    .outer1 {
      z-index: 3;
      height: 559px;
      background: url('../../assets/imgs/ddsindex/bg.png')
        100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
      width: 750px;
      position: relative;
      .box1 {
        z-index: auto;
        width: 670px;
        height: 76px;
        margin: 22px 0 0 40px;
        .box2 {
          z-index: auto;
          width: 143px;
          height: 76px;
          .word1 {
            // z-index: 51;
            // width: 140px;
            // display: block;
            // overflow-wrap: break-word;
            // color: rgba(255, 255, 255, 1);
            // font-size: 24px;
            // letter-spacing: 11px;
            // line-height: 33px;
            // text-align: left;
            // align-self: flex-end;
            width: 143px;
            height: 76px;
            // margin-top: 22px;
            // margin-left: 40px;
          }
          .info1 {
            z-index: 50;
            width: 136px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 38px;
            font-family: PingFangSC-Semibold;
            line-height: 42px;
            text-align: left;
            align-self: flex-start;
            margin-top: 1px;
          }
        }
        .box3 {
          z-index: 18;
          height: 64px;
          border-radius: 32px;
          background-color: rgba(255, 255, 255, 0.2);
          width: 202px;
          justify-content: center;
          align-items: flex-start;
          padding-left: 19px;
          margin: 6px 0 0 147px;
          .group1 {
            z-index: auto;
            // width: 99px;
            height: 40px;
            // justify-content: space-between;
            .label1 {
              z-index: 20;
              width: 32px;
              height: 32px;
              margin-top: 4px;
            }
            .word2 {
              z-index: 19;
            //   width: 56px;
              margin-left: 10px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 28px;
              font-family: PingFangSC-Medium;
              line-height: 40px;
              text-align: left;
            }
          }
        }
        .pic1 {
          z-index: 26;
          width: 64px;
          height: 64px;
          margin: 6px 0 0 30px;
        }
        .img1 {
          z-index: 5;
          width: 64px;
          height: 64px;
          margin: 6px 0 0 20px;
        }
      }
      .box4 {
        z-index: auto;
        width: 112px;
        height: 4px;
        margin: 341px 0 0 319px;
        .pic2 {
          z-index: 52;
          width: 112px;
          height: 4px;
        }
      }
      .box5 {
        z-index: 15;
        height: 30px;
        border-radius: 50%;
        background: #ED584B;
        width: 30px;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 684px;
        top: 35px;
        .word3 {
          z-index: 16;
          // width: 13px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 18px;
          font-family: Arial-Black;
          line-height: 30px;
          font-weight: bold;
          text-align: left;
        }
      }
    }
    .outer2 {
      z-index: auto;
    //   width: 710px;
    padding: 0 20px;
      height: 299px;
      align-self: center;
      margin-top: 74px;
      flex-wrap: wrap;
      .main1-0 {
        z-index: 66;
        height: 150px;
        min-width: 142px;
        justify-content: flex-end;
        padding-bottom: 16px;
        align-items: center;
        &:nth-child(5n) {
          margin-right: 0;
        }
        &:nth-last-child(-n + 5) {
          margin-bottom: 0;
        }
        .outer3-0 {
          z-index: auto;
          // width: 78px;
          height: 114px;
          .img2-0 {
            z-index: 68;
            width: 64px;
            height: 64px;
            align-self: center;
          }
          .word4-0 {
            z-index: 67;
            width: 130px;
            display: block;
            // overflow-wrap: break-word;
            color: rgba(38, 46, 63, 1);
            font-size: 26px;
            line-height: 42px;
            text-align: center;
            margin-top: 8px;
          }
        }
        .flex-col{
          justify-content: center;
          align-items: center;
        }
      }
    }
    .outer4 {
      z-index: 187;
      height: 262px;
      background: url('../../assets/imgs/ddsindex/bluebg.png')
        100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
      align-self: center;
      margin-top: 51px;
      width: 690px;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 20px 0 0 20px;
      .group2 {
        z-index: auto;
        width: 640px;
        height: 58px;
        justify-content: space-between;
        .word5 {
          z-index: 189;
        //   width: 160px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 40px;
          font-family: PingFangSC-Medium;
          line-height: 58px;
          text-align: left;
        }
        .word6 {
          z-index: 188;
        //   width: 470px;
        margin-left: 10px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 20px;
          line-height: 28px;
          text-align: left;
          margin-top: 22px;
        }
      }
    }
    .outer5 {
      z-index: 213;
      height: 167px;
      background: url('../../assets/imgs/ddsindex/greenbg.png')
        100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
      align-self: flex-end;
      margin-top: 114px;
      width: 738px;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 16px 0 0 42px;
      .mod1 {
        z-index: auto;
        width: 571px;
        height: 107px;
        .outer6 {
          z-index: auto;
          // width: 150px;
          height: 98px;
          margin-top: 9px;
          .info2 {
            z-index: 224;
            // width: 150px;
            display: block;
            // overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 50px;
            line-height: 50px;
            text-align: left;
          }
          .bd1 {
            z-index: auto;
            width: 96px;
            height: 38px;
            justify-content: space-between;
            margin: 10px 0 0 21px;
            .info3 {
              z-index: 216;
              // width: 60px;
              display: block;
              // overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 30px;
              font-family: PingFangSC-Medium;
              line-height: 38px;
              text-align: left;
            }
            .icon1 {
              z-index: 217;
              width: 28px;
              height: 28px;
              margin-top: 5px;
            }
          }
        }
        .outer7 {
          z-index: 228;
          width: 1px;
          height: 106px;
          background-color: rgba(88, 118, 102, 0.8);
          margin-left: 12px;
        }
        .outer8 {
          z-index: auto;
          // width: 384px;
          height: 82px;
          margin: 17px 0 0 24px;
          .txt1 {
            z-index: 226;
            // width: 384px;
            display: block;
            // overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 32px;
            font-family: PingFangSC-Semibold;
            line-height: 32px;
            text-align: left;
          }
          .word7 {
            z-index: 227;
            // width: 231px;
            display: block;
            // overflow-wrap: break-word;
            color: rgba(255, 255, 255, 0.7);
            font-size: 24px;
            line-height: 30px;
            text-align: left;
            align-self: flex-start;
            margin-top: 20px;
          }
        }
      }
    }
    .outer9 {
      z-index: auto;
    //   width: 670px;
      height: 40px;
      margin: 55px 0 0 40px;
      align-items: center;
      .info4 {
        z-index: 231;
        width: 554px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: PingFangSC-Medium;
        font-weight: 700;
        line-height: 40px;
        text-align: left;
      }
      .info5 {
        z-index: 232;
        // width: 52px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(118, 127, 149, 1);
        font-size: 26px;
        line-height: 38px;
        text-align: right;
        margin: 1px 0 0 30px;
      }
      .label2 {
        z-index: 233;
        width: 24px;
        height: 24px;
        margin: 0 0 0 10px;
      }
    }
    .info6 {
      z-index: 230;
      width: 670px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(152, 160, 179, 1);
      font-size: 24px;
      line-height: 33px;
      text-align: left;
      align-self: center;
      margin-top: 10px;
    }
    .img3 {
      z-index: 238;
      width: 670px;
      height: 254px;
      align-self: center;
      margin-top: 35px;
    }
    .outer10 {
      z-index: auto;
      width: 670px;
      height: 242px;
      justify-content: space-between;
      margin: 20px 0 0 40px;
      .pic3 {
        z-index: 240;
        width: 325px;
        height: 242px;
      }
      .img4 {
        z-index: 335;
        width: 325px;
        height: 242px;
      }
    }
    .outer11 {
      z-index: 326;
      height: 90px;
      align-self: center;
      margin-top: 50px;
      width: 670px;
      justify-content: center;
      .wrap1 {
        z-index: auto;
        // width: 670px;
        height: 40px;
        align-items: center;
        .word8 {
          z-index: 328;
          width: 554px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(38, 46, 63, 1);
          font-size: 40px;
          font-family: PingFangSC-Medium;
          font-weight: 700;
          line-height: 40px;
          text-align: left;
        }
        .word9 {
          z-index: 329;
        //   width: 52px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(118, 127, 149, 1);
          font-size: 26px;
          line-height: 38px;
          text-align: right;
          margin: 1px 0 0 30px;
        }
        .label3 {
          z-index: 330;
          width: 24px;
          height: 24px;
          margin-left:10px;
        }
      }
    }
    .outer12 {
      z-index: 294;
      height: 260px;
      background-color: rgba(255, 255, 255, 1);
      width: 750px;
      position: relative;
      .box6 {
        z-index: auto;
        width: 671px;
        height: 202px;
        justify-content: space-between;
        margin: 30px 0 0 39px;
        .pic4 {
          z-index: 320;
          width: 162px;
          height: 201px;
          margin-top: 1px;
        }
        .bd2 {
          z-index: auto;
          width: 480px;
          height: 200px;
          .box7 {
            z-index: 317;
            height: 40px;
            width: 480px;
            justify-content: center;
            .word10 {
              z-index: 318;
              // width: 480px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(38, 46, 63, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              line-height: 32px;
              text-align: left;
            }
          }
          .box8 {
            z-index: 312;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            .layer1 {
              z-index: auto;
            //   width: 464px;
              height: 24px;
            //   justify-content: space-between;
              .word11 {
                z-index: 313;
                // width: 255px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(118, 127, 149, 1);
                font-size: 24px;
                line-height: 24px;
                text-align: left;
              }
              .box9 {
                z-index: 315;
                width: 1px;
                height: 20px;
                margin: 0 10px;
                background-color: rgba(190, 194, 204, 1);
                margin-top: 2px;
              }
              .word12 {
                z-index: 314;
                // width: 188px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(118, 127, 149, 1);
                font-size: 24px;
                line-height: 24px;
                text-align: left;
              }
            }
          }
          .box10 {
            z-index: 301;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            .box11 {
              z-index: auto;
            //   width: 322px;
              height: 32px;
            //   justify-content: space-between;
              .layer2 {
                z-index: 309;
                height: 32px;
                border-radius: 3px;
                background-color: rgba(245, 100, 85, 1);
                // width: 108px;
                padding: 0 10px;
                justify-content: center;
                align-items: center;
                .word13 {
                  z-index: 310;
                  // width: 88px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(255, 255, 255, 0.9);
                  font-size: 22px;
                  line-height: 30px;
                  text-align: left;
                }
              }
              .layer3 {
                z-index: 303;
                height: 32px;
                border-radius: 3px;
                background-color: rgba(45, 116, 243, 1);
                // width: 86px;
                padding: 0 10px;
                margin: 0 10px;
                justify-content: center;
                align-items: center;
                .word14 {
                  z-index: 304;
                  // width: 66px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(255, 255, 255, 0.9);
                  font-size: 22px;
                  line-height: 30px;
                  text-align: left;
                }
              }
              .layer4 {
                z-index: 306;
                height: 32px;
                border-radius: 3px;
                background-color: rgba(45, 116, 243, 1);
                // width: 108px;
                padding: 0 10px;
                justify-content: center;
                align-items: center;
                .info7 {
                  z-index: 307;
                  // width: 88px;
                  display: block;
                  overflow-wrap: break-word;
                  color: rgba(255, 255, 255, 0.9);
                  font-size: 22px;
                  line-height: 30px;
                  text-align: left;
                }
              }
            }
          }
          .box12 {
            z-index: 297;
            height: 40px;
            margin-top: 20px;
            width: 480px;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0 0 5px 86px;
            .info8 {
              z-index: 299;
              width: 48px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 24px;
              line-height: 24px;
              text-align: left;
            }
          }
        }
      }
      .box13 {
        z-index: auto;
        width: 478px;
        height: 1px;
        margin: 27px 0 0 232px;
        .section2 {
          z-index: 295;
          width: 478px;
          height: 1px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfd5c7beda5d122483e9e87d60a211e44e865e60f084cab63fd2b87a6031825ce)
            100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        }
      }
      .box14 {
        z-index: 323;
        height: 36px;
        border-radius: 6px 0 6px 0;
        background-color: rgba(248, 218, 153, 1);
        // width: 100px;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 40px;
        top: 30px;
        .txt2 {
          z-index: 324;
        //   width: 88px;
          padding: 0 5px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(159, 97, 58, 1);
          font-size: 22px;
          font-family: PingFangSC-Medium;
          line-height: 30px;
          text-align: center;
        }
      }
      .txt3 {
        z-index: 298;
        position: absolute;
        left: 232px;
        top: 188px;
        // width: 81px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Arial-Black;
        line-height: 40px;
        text-align: left;
      }
    }
    .outer13 {
      z-index: 273;
      height: 260px;
      background-color: rgba(255, 255, 255, 1);
      width: 750px;
      position: relative;
      .box15 {
        z-index: auto;
        width: 670px;
        height: 202px;
        justify-content: space-between;
        margin: 28px 0 0 40px;
        .bd3 {
          z-index: 291;
          width: 162px;
          height: 202px;
          background: url('../../assets/imgs/ddsindex/product2.png')
            0px 1px no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        }
        .bd4 {
          z-index: auto;
          width: 480px;
          height: 200px;
          margin-top: 2px;
          .mod2 {
            z-index: 288;
            height: 40px;
            width: 480px;
            justify-content: center;
            .word15 {
              z-index: 289;
              // width: 480px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(38, 46, 63, 1);
              font-size: 32px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              line-height: 32px;
              text-align: left;
            }
          }
          .mod3 {
            z-index: 283;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            .outer14 {
              z-index: auto;
            //   width: 429px;
              height: 24px;
            //   justify-content: space-between;
              .txt4 {
                z-index: 284;
                // width: 216px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(118, 127, 149, 1);
                font-size: 24px;
                line-height: 24px;
                text-align: left;
              }
              .main2 {
                z-index: 286;
                width: 1px;
                height: 20px;
                margin: 0 10px;
                background-color: rgba(190, 194, 204, 1);
                margin-top: 2px;
              }
              .txt5 {
                z-index: 285;
                // width: 192px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(118, 127, 149, 1);
                font-size: 24px;
                line-height: 24px;
                text-align: left;
              }
            }
          }
          .mod4 {
            z-index: 279;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            .wrap2 {
              z-index: 280;
              height: 32px;
              border-radius: 3px;
              background-color: rgba(245, 100, 85, 1);
            //   width: 108px;
            padding: 0 10px;
              justify-content: center;
              align-items: center;
              .txt6 {
                z-index: 281;
                // width: 88px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 0.9);
                font-size: 22px;
                line-height: 30px;
                text-align: left;
              }
            }
          }
          .mod5 {
            z-index: 275;
            height: 40px;
            margin-top: 20px;
            width: 480px;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0 0 5px 86px;
            .word16 {
              z-index: 277;
              width: 48px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 24px;
              line-height: 24px;
              text-align: left;
            }
          }
        }
      }
      .box16 {
        z-index: auto;
        width: 478px;
        height: 1px;
        margin: 29px 0 0 232px;
        .box17 {
          z-index: 292;
          width: 478px;
          height: 1px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfd5c7beda5d122483e9e87d60a211e44e865e60f084cab63fd2b87a6031825ce)
            100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        }
      }
      .word17 {
        z-index: 276;
        position: absolute;
        left: 232px;
        top: 188px;
        // width: 81px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Arial-Black;
        line-height: 40px;
        text-align: left;
      }
    }
    .outer15 {
      z-index: 254;
      height: 260px;
      background-color: rgba(255, 255, 255, 1);
      width: 750px;
      justify-content: center;
      align-items: center;
      position: relative;
      .section3 {
        z-index: auto;
        width: 670px;
        height: 202px;
        justify-content: space-between;
        .group3 {
          z-index: 271;
          width: 162px;
          height: 202px;
          background: url('../../assets/imgs/ddsindex/product3.png')
            0px 1px no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        }
        .group4 {
          z-index: auto;
          width: 480px;
          height: 200px;
          .section4 {
            z-index: 268;
            width: 474px;
            height: 40px;
            align-self: flex-start;
          }
          .section5 {
            z-index: 260;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            .word18 {
              z-index: 261;
              // width: 144px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(118, 127, 149, 1);
              font-size: 24px;
              line-height: 24px;
              text-align: left;
            }
          }
          .section6 {
            z-index: 263;
            height: 40px;
            margin-top: 10px;
            width: 480px;
            justify-content: center;
            align-items: flex-start;
            padding-left: 1px;
            .group5 {
              z-index: 265;
              height: 32px;
              border-radius: 3px;
              background-color: rgba(45, 116, 243, 1);
            //   width: 86px;
            padding: 0 10px;
              justify-content: center;
              align-items: center;
              .word19 {
                z-index: 266;
                // width: 66px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 0.9);
                font-size: 22px;
                line-height: 30px;
                text-align: left;
              }
            }
          }
          .section7 {
            z-index: 256;
            height: 40px;
            margin-top: 20px;
            width: 480px;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 0 0 5px 87px;
            .word20 {
              z-index: 258;
              // width: 48px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(114, 125, 139, 1);
              font-size: 24px;
              line-height: 24px;
              text-align: left;
            }
          }
        }
      }
      .info9 {
        z-index: 269;
        position: absolute;
        left: 230px;
        top: 34px;
        // width: 480px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 32px;
        font-family: PingFangSC-Medium;
        font-weight: 700;
        line-height: 32px;
        text-align: left;
      }
      .word21 {
        z-index: 257;
        position: absolute;
        left: 232px;
        top: 188px;
        // width: 81px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Arial-Black;
        line-height: 40px;
        text-align: left;
      }
    }
    .outer16 {
      z-index: auto;
      width: 330px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 210px;
      .icon2 {
        z-index: 243;
        width: 36px;
        height: 40px;
      }
      .info10 {
        z-index: 252;
        width: 260px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(224, 224, 224, 1);
        font-size: 26px;
        line-height: 37px;
        text-align: center;
        margin-top: 2px;
      }
    }
    .img5 {
      z-index: 337;
      width: 234px;
      height: 85px;
      align-self: flex-start;
      margin: 150px 0 0 250px;
    }
    .outer17 {
      z-index: 338;
      height: 98px;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: inset 0px 1px 0px 0px rgba(235, 235, 235, 1);
      margin-top: 120px;
      width: 750px;
      .block1 {
        z-index: auto;
        width: 606px;
        height: 44px;
        justify-content: space-between;
        margin: 12px 0 0 72px;
        .icon3 {
          z-index: 340;
          width: 44px;
          height: 44px;
        }
        .label4 {
          z-index: 349;
          width: 44px;
          height: 44px;
        }
        .icon4 {
          z-index: 358;
          width: 44px;
          height: 44px;
        }
        .icon5 {
          z-index: 364;
          width: 44px;
          height: 44px;
        }
      }
      .block2 {
        z-index: auto;
        width: 610px;
        height: 24px;
        margin: 6px 0 0 70px;
        .info11 {
          z-index: 347;
          width: 48px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(45, 116, 243, 1);
          font-size: 24px;
          font-family: PingFangSC-Semibold;
          line-height: 24px;
          text-align: justify;
        }
        .txt7 {
          z-index: 355;
          width: 48px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(152, 160, 179, 1);
          font-size: 24px;
          line-height: 24px;
          text-align: center;
          margin-left: 139px;
        }
        .word22 {
          z-index: 357;
          width: 62px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(152, 160, 179, 1);
          font-size: 24px;
          line-height: 24px;
          text-align: center;
          margin-left: 133px;
        }
        .word23 {
          z-index: 371;
          width: 48px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(152, 160, 179, 1);
          font-size: 24px;
          line-height: 24px;
          text-align: center;
          margin-left: 132px;
        }
      }
    }
  }
  .section8 {
    z-index: 59;
    height: 140px;
    width: 100%;
    justify-content: center;
    align-items: center;;
    position: absolute;
    left: 0px;
    top: 453px;
    // padding: 35px 118px 0 0;
    .mybg{
      width: 100%;
      height: 100%;
      z-index: 300;
    }
    .mod6 {
      z-index: auto;
     position: absolute;
     left: 40px;
     top: 10px;
      width: 670px;
      height: 130px;
      background: #FFFFFF;
      box-shadow: 0px 12px 18px 0px rgba(237, 242, 255, 0.6);
      border-radius: 74px;
      .outer18 {
        z-index: 63;
        // width: 166px;
        height: 45px;
        position: absolute;
        left: 146px;
        top: 25px;
        // width: 178px;
      }
      .word25 {
        z-index: 61;
        // width: 446px;
        // width: 446px;
        height: 26px;
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #767F95;
        line-height: 26px;
        position: absolute;
        left: 146px;
        top: 80px;
      }
    }
  }
  .section9 {
    z-index: 194;
    height: 228px;
    border-radius: 10px 0 0 10px;
    background-color: rgba(255, 255, 255, 1);
    width: 325px;
    justify-content: center;
    align-items: flex-start;
    padding-left: 24px;
    position: absolute;
    left: 50px;
    top: 1081px;
    .layer5 {
      z-index: auto;
      width: 274px;
      height: 168px;
      .info12 {
        z-index: 196;
        width: 271px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 32px;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
        line-height: 45px;
        text-align: left;
        align-self: flex-start;
      }
      .group6 {
        z-index: auto;
        width: 274px;
        height: 123px;
        justify-content: space-between;
        .mod7 {
          z-index: auto;
          width: 144px;
          height: 113px;
          margin-top: 10px;
          .word26 {
            z-index: 195;
            width: 144px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(118, 127, 149, 0.7);
            font-size: 24px;
            line-height: 33px;
            text-align: center;
          }
          .box18 {
            z-index: 198;
            height: 50px;
            border-radius: 25px;
            background-color: rgba(243, 60, 42, 1);
            align-self: flex-start;
            margin-top: 30px;
            width: 112px;
            justify-content: center;
            align-items: center;
            .txt9 {
              z-index: 199;
              width: 72px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 24px;
              font-family: PingFangSC-Semibold;
              line-height: 38px;
              text-align: left;
            }
          }
        }
        .img6 {
          z-index: 208;
          width: 100px;
          height: 87px;
        }
      }
    }
  }
  .section10 {
    z-index: 192;
    position: absolute;
    left: 50px;
    top: 1081px;
    width: 650px;
    height: 228px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 24px 40px 0px rgba(13, 29, 88, 0.05);
  }
  .section11 {
    z-index: 201;
    height: 228px;
    border-radius: 0 10px 10px 0;
    background-color: rgba(255, 255, 255, 1);
    width: 325px;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    left: 375px;
    top: 1081px;
    padding: 0 0 30px 24px;
    .bd5 {
      z-index: auto;
      width: 274px;
      height: 131px;
      justify-content: space-between;
      .group7 {
        z-index: auto;
        width: 144px;
        height: 113px;
        margin-top: 18px;
        .info13 {
          z-index: 202;
          width: 144px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(118, 127, 149, 0.7);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
        .main3 {
          z-index: 205;
          height: 50px;
          border-radius: 25px;
          background-color: rgba(243, 60, 42, 1);
          align-self: flex-start;
          margin-top: 30px;
          width: 112px;
          justify-content: center;
          align-items: center;
          .word27 {
            z-index: 206;
            width: 72px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 24px;
            font-family: PingFangSC-Semibold;
            line-height: 38px;
            text-align: left;
          }
        }
      }
      .pic5 {
        z-index: 210;
        width: 100px;
        height: 94px;
      }
    }
    .info14 {
      z-index: 203;
      position: absolute;
      left: 24px;
      top: 30px;
      width: 271px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(38, 46, 63, 1);
      font-size: 32px;
      font-family: PingFangSC-Semibold;
      font-weight: 700;
      line-height: 45px;
      text-align: left;
    }
  }
}

</style>
